<template>
  <a-row :guter="10">
    <a-col :span="6">
      <div class="group">
        <VueDraggableNext
          :list="list1"
          ghost-class="ghost"
          handle=".move"
          filter=".forbid"
          :force-fallback="true"
          chosen-class="chosenClass"
          animation="300"
          :group="groupA"
          :clone="cloneDog"
          :sort="false"
        >
          <div class="item move" v-for="item in list1" :key="item.id">
            {{ item.name }}
          </div>
        </VueDraggableNext>
      </div>
    </a-col>
    <a-col :span="12">
      <div class="group">
        <VueDraggableNext
          :list="list2"
          ghost-class="ghost"
          handle=".move"
          filter=".forbid"
          :force-fallback="true"
          chosen-class="chosenClass"
          animation="300"
          :group="groupB"
          :fallback-class="true"
          :fallback-on-body="true"
        >
          <div class="item move main" v-for="item in list2" :key="item.id">
            {{ item.name }}
          </div>
        </VueDraggableNext>
      </div>
    </a-col>
    <a-col :span="6">
      <p v-for="item in list2" :key="item.id">{{ item.id }}--{{ item.name }}--{{ item.menu }}</p>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'

const list1 = ref([
  { name: 'A组', id: 1 },
  { name: '库存', id: 2 },
  { name: '销量', id: 3 },
  { name: '日志', id: 4 }
])
const list2 = ref([
  { name: 'B组', id: 5, menu: '' },
  { name: '员工', id: 6, menu: '' },
  { name: '报表', id: 7, menu: '' }
])
const groupA = reactive({
  name: 'group',
  pull: 'clone',
  put: false //允许拖入
})
const groupB = reactive({
  name: 'group',
  pull: true,
  put: true
})

/** 自定义clone操作 */
function cloneDog(val: any) {
  console.log('log内容val', val)
  return {
    name: val.name + val.id.toString(),
    id: val.id,
    menu: '栏目'
  }
}
</script>
<style lang="less" scoped>
.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  width: 80%;
  margin-right: 20px;
}
.item {
  border: solid 1px #ddd;
  padding: 0px;
  text-align: left;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  height: 36px;
  user-select: none;
}

.ghost {
  border: solid 1px rgb(19, 41, 239) !important;
}
.chosenClass {
  opacity: 1;
  border: solid 1px red;
}
.fallbackClass {
  background-color: aquamarine;
}
.main {
  background-color: aquamarine;
}
</style>
